<script setup lang="ts">
import { log } from 'console';
import { ref, getCurrentInstance, onMounted } from 'vue';
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';

let { proxy }: any = getCurrentInstance();

const tableData = ref([
  {
    age: '10',
    name: '图图',
    address: '北京'
  },
  {
    age: '61',
    name: '牛爷爷',
    address: '上海'
  },
  {
    age: '9',
    name: '小美',
    address: '广州'
  },
  {
    age: '8',
    name: '刷子',
    address: '深圳'
  }
]);

// 查询关键字
const searchKey = ref(null);
// 筛选后数组
const newlist = ref([]);

onMounted(() => {
  newlist.value = tableData.value;
});

// 表格序号
const indexMethod = (index: number) => {
  return index + 1;
};
// 修改密码
const changePassword = () => {
  console.log('changePassword');
};
// 点击用户名查看
const userBtn = (row) => {
  proxy.$router.push({ path: 'testsave', query: row });
};
// 新建用户
const addUser = () => {
  proxy.$router.push({ path: 'testsave' });
};
// 编辑
const editBtn = (row) => {
  proxy.$router.push({ path: 'testsave', query: row });
};
// 删除
const delBtn = (index) => {
  tableData.value.splice(index, 1);
};
// 查询
const search = () => {
  if (searchKey.value == '') {
    newlist.value = tableData.value;
  } else {
    newlist.value = tableData.value.filter((item) => {
      return item.name == searchKey.value;
    });
  }
};

// 回车查询
const keysearch = (e) => {
  if (e.keyCode === 13) {
    search();
  }
};
</script>


<template>
  <div id="test">
    <div class="header">
      <el-form :inline="true" :model="null" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="searchKey" @keydown="keysearch"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group size="large">
            <el-radio-button label="启用" />
            <el-radio-button label="禁用" />
            <el-radio-button label="全部" />
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button class="seaechbtn" @click="search">查询</el-button>
          <el-button>清空</el-button>
          <el-button class="adduserbtn" @click="addUser">新建用户</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="newlist" stripe style="width: 100%">
        <el-table-column type="index" width="100" label="序号" :index="indexMethod" />
        <el-table-column prop="name" label="用户名">
          <template v-slot="{ row }">
            <el-link @click="userBtn(row)" type="primary" :underline="false">{{
              row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column>
          <template v-slot="{ row, $index }">
            <el-tooltip content="修改密码" placement="top">
              <el-button icon="Key" circle @click="changePassword(row)" />
            </el-tooltip>
            <el-tooltip content="编辑" placement="top">
              <el-button icon="EditPen" circle @click="editBtn(row)" />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button icon="DeleteFilled" circle @click="delBtn($index)" />
            </el-tooltip>
            <el-tooltip content="禁用" placement="top">
              <el-button icon="SuitcaseLine" circle />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>






</template>



<style  scoped>
.header {
  height: 50px;
  width: calc(100% - 70px);
  padding: 10px;
  padding-left: 60px;
  background-color: #fff;
}
.seaechbtn {
  color: white;
  background-color: #67c23a;
}
.seaechbtn:hover {
  background-color: #95d475;
}
.adduserbtn {
  color: white;
  background-color: #409eff;
}
.adduserbtn:hover {
  background-color: #79bbff;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.table {
  width: 100%;
}
</style>